<template>
  <div style="background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">评价与反馈管理</span>
  </div>
  <div>
    <el-card style="margin:5px;height: 70px;">
      <el-form inline="inline">
        <el-form-item label="订单Id">
          <el-input v-model="searchForm.orderId" @keydown.enter.prevent="load" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="客服Id">
          <el-input v-model="searchForm.csId" @keydown.enter.prevent="load" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="评价星级" >
          <el-select v-model="searchForm.starRating" placeholder="请选择" style="width: 100px">
            <el-option label="一星" value="一星"></el-option>
            <el-option label="二星" value="二星"></el-option>
            <el-option label="三星" value="三星"></el-option>
            <el-option label="四星" value="四星"></el-option>
            <el-option label="五星" value="五星"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="load">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin:5px;">
      <div style="margin: 10px 0px 40px 10px;">
       评价与反馈列表
      </div>
      <div>
        <el-table :data="FeedbackArr">
          <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
          <el-table-column prop="orderId" label="订单Id" align="center"></el-table-column>0
          <el-table-column  prop="csId" label="客服Id" align="center"></el-table-column>
          <el-table-column  prop="evaluate" label="评价" align="center"></el-table-column>
          <el-table-column  prop="feedback" label="反馈" align="center"></el-table-column>
          <el-table-column  prop="starRating" label="评价星级" align="center"></el-table-column>
          <el-table-column  prop="status" label="状态" align="center"></el-table-column>
          <el-table-column  prop="likes" label="点赞数" align="center"></el-table-column>
          <el-table-column  prop="createTime" label="创建时间" align="center"></el-table-column>
          <el-table-column  prop="updateTime" label="更新时间" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button @click="editFeedback(scope.row)" link type="primary" size="small">编辑</el-button>
              <el-button @click="deleteFeedback(scope.row.id)" link type="primary" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin:30px;float: right;">
          <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="[5, 10, 15, 20]"
              v-model:current-page="searchForm.pageNum"
              v-model:page-size="searchForm.pageSize"
              v-model:total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>
    <el-dialog :title="dialogTitle" v-model="dialogVisible"
               :close-on-click-modal="false" style="width:800px;padding:40px;">
      <el-form label-position="top" label-width="80px">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="订单Id">
              <el-input v-model="editForm.orderId" placeholder="请输入" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客服Id">
              <el-input v-model="editForm.csId" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="评价">
              <el-input v-model="editForm.evaluate" placeholder="请输入" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="反馈">
              <el-input v-model="editForm.feedback" placeholder="请输入" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="评价星级">
              <el-input v-model="editForm.starRating" placeholder="请输入" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
        <el-form-item label="状态">
          <el-input v-model="editForm.status" placeholder="请输入" disabled></el-input>
        </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
        <el-form-item label="点赞数">
          <el-input v-model="editForm.likes" placeholder="请输入" disabled></el-input>
        </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button @click="addFeedback" type="primary">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import axios from "axios";
import {ElMessage} from "element-plus";

const searchForm = ref({
  pageNum:1,
  pageSize:5
})
const FeedbackArr= ref([])
const dialogVisible= ref(false)
const dialogTitle= '编辑评价与反馈'
const editForm = ref({})
const total= ref(1)

const handleSizeChange= (val) => {
  searchForm.value.pageSize=val
  load()
}
const handleCurrentChange= (val) => {
  searchForm.value.pageNum=val
  load()
}

onMounted(()=>{
  load()
  searchForm.starRating='1'
  getEmp(currentEmp)
})

const resetSearch= () => {
  searchForm.value={}
  load()
}
const load= () => {
    axios.post(BASE_URL+'/v1/feedback/select',searchForm.value)
        .then((response)=>{
          if (response.data.code==2000){
            FeedbackArr.value=response.data.data.list
            total.value=response.data.data.total
          }else {
            ElMessage.error(response.data.msg)
          }
        })
}
const handleClose= () => {
  if(confirm("确定关闭弹窗吗")){
    dialogVisible.value=false
  }
}

const editFeedback= (row) => {
  load()
  editForm.value=row
  editForm.value.csId=currentEmp.value.id
  dialogVisible.value=true
}
const currentEmp=ref({})
const addFeedback= () => {
  axios.post(BASE_URL+'/v1/feedback/update',editForm.value)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('保存成功')
          dialogVisible.value=false
          load()
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
const deleteFeedback= (id) => {
  if (confirm("确认删除该记录吗")){
  axios.delete(BASE_URL+'/v1/feedback/delete/'+id)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('删除成功')
          load()
        }else {
          ElMessage.error(response.data.msg)
        }
      })
  }
}



</script>

<style scoped>

</style>